<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/file_bg.png') +')'}">
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#fff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		<view class="boxPanel rel">
			<view class="flex-between m-b-30">
				<view class="">
					<view class="font-36 text-bold">{{infoDetail.user_name}}</view>
					<view class="c-78">{{infoDetail.phone}}</view>
				</view>
				<!-- <view class="sex"></view> -->
			</view>
			<view class="fill-body radius-20 p-24">
				<view class="flex-x-between m-b-10">
					<text class="c-77">身份证号</text>
					<text>{{infoDetail.credt_code}}</text>
				</view>
				<!-- <view class="flex-x-between">
					<text class="c-77">出生日期</text>
					<text>1999-09-12</text>
				</view> -->
			</view>
		</view>
		
		<!-- <view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
			<text class="line"></text>
			指标来源：心率带
		</view> -->
		
		<view class="module rel">
			<view class="item" v-for="(item,index) in infoDetail.profile" :key="index">
				 <image class="img" :src="$util.img(item.logo_img)" mode="aspectFill" lazy-load v-if="item.logo_img"/>
				 <image class="img" :src="$util.img('image/file_1.png')" mode="aspectFill" lazy-load v-else/>
				 <view class="font-24 c-5d">{{item.name}}</view>
				 <view class="" v-if="item.name !== '体质类型'">
					 <text class="font-32 text-bold color-title2">{{item.value}}</text>
					 <text class="font-24 c-78">{{item.default_unit}}</text>
				 </view>
				 <view class="ellipsis font-24 c-78" v-else>{{item.value}}</view>
			</view>
		</view>
		
		<!-- <view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
			<text class="line"></text>
			指标来源：智能手表
		</view>
		
		<view class="module rel">
			<view class="item">
				 <image class="img" :src="$util.img('image/file_4.png')" mode="aspectFill"/>
				 <view class="font-24 c-5d">心率</view>
				 <view class="">
					 <text class="font-32 text-bold color-title2">170</text>
					 <text class="font-24 c-78">次/分钟</text>
				 </view>
			</view>
			<view class="item">
				 <image class="img" :src="$util.img('image/file_5.png')" mode="aspectFill"/>
				 <view class="font-24 c-5d">体脂率</view>
				 <view class="">
					 <text class="font-32 text-bold color-title2">170</text>
					 <text class="font-24 c-78">%</text>
				 </view>
			</view>
			<view class="item">
				 <image class="img" :src="$util.img('image/file_6.png')" mode="aspectFill"/>
				 <view class="font-24 c-5d">腰围</view>
				 <view class="">
					 <text class="font-32 text-bold color-title2">170</text>
					 <text class="font-24 c-78">cm</text>
				 </view>
			</view>
		</view>
		
		<view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
			<text class="line"></text>
			指标来源：其他硬件
		</view>
		
		<view class="module rel">
			<view class="item">
				 <image class="img" :src="$util.img('image/file_7.png')" mode="aspectFill"/>
				 <view class="font-24 c-5d">肺活量</view>
				 <view class="">
					 <text class="font-32 text-bold color-title2">170</text>
					 <text class="font-24 c-78">次</text>
				 </view>
			</view>
		</view> -->
		
		<warn :show="showWarn" @close="showWarn = false"></warn>
		 
	</view>
</template>

<script>
	import warn from '../../components/warn/warn.vue'
	export default {
		components: {
			warn
		},
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				showWarn: false,
				infoDetail: {},

			}
		},
		onLoad() {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
			this.getDetail()
		},
		methods: {
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getUserProfile",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.infoDetail = res.data;
			        }else {
						// this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 531rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.sex {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 106rpx;
	height: 106rpx;
	background: $color-title2;
	color: #fff;
	font-size: 36rpx;
	border-radius: 50%;
	font-weight: bold;
}

.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}

.module {
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	margin: 24rpx 24rpx 0;
	.item {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 218rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		overflow: hidden;
		margin-right: 20rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		.img {
			width: 57rpx;
			height: 57rpx;
			margin-bottom: 4rpx;
		}
	}
}
</style>
